<template>
  <div class="swip-com-container">
    <div class="swiper internetSwiper" :id="id" v-if="swiperData.length > 4">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item, index) in swiperData"
          :key="index"
        >
          <div
            :class="`${domSelect}_${index}`"
            class="internetSwiper-item"
          ></div>
        </div>
      </div>
    </div>
    <div v-else class="noSwiperCont">
      <div
        v-for="(item, index) in swiperData"
        :key="index"
        :class="`${domSelect}_${index}`"
        class="internetSwiper-item"
      ></div>
    </div>
  </div>
</template>

<script>
import "swiper/swiper-bundle.min.css";
import Swiper from "swiper/swiper-bundle.min.js";
import generatePieChart from "../../util/generatePieChart";
export default {
  props: {
    domSelect: {
      // 区别每个echart图表容器的dom选择器
      type: String,
      required: true
    },
    swiperData: {
      // 轮播数据
      type: Array,
      default: () => [],
      required: true
    },
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      mySwiper: null
    };
  },
  watch: {
    // 轮播数据 发送改变
    swiperData: {
      deep: true,
      handler(newVal) {
        // 如果数据长度小于3 直接渲染图表 如果已生成mySwiper轮播则销毁
        if (newVal.length <= 4) {
          this.$nextTick(() => {
            this.createChart();
          });
          if (this.mySwiper) {
            this.mySwiper.destroy(true, true);
            this.mySwiper = null;
          }
        } else {
          // 数据长度大于4(需要轮播的情况)
          if (this.mySwiper) {
            // 已轮播则更新mySwiper
            this.mySwiper.update();
            // 并将重新渲染图表
            this.createChart();
          } else {
            // 未轮播 进行轮播初始化
            this.$nextTick(() => {
              this.initSwiper();
            });
          }
        }
      }
    }
  },
  methods: {
    initSwiper() {
      const _this = this;
      let swiperOption = {
        // mySwiper配置
        loop: true,
        autoplay: {
          delay: 6000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        slidesPerView: 4,
        spaceBetween: 0,
        observer: true,
        observeParents: false,
        on: {
          init: function() {
            _this.$nextTick(() => {
              // 已完成轮播初始化 动态生成图表
              _this.createChart();
            });
          }
        }
      };
      _this.mySwiper = new Swiper(`#${this.id}`, swiperOption);
    },
    createChart() {
      this.$nextTick(() => {
        // 获取所有图表容器的dom选择器
        const classList = this.swiperData.map((item, index) => ({
          className: `${this.domSelect}_${index}`,
          data: item
        }));
        classList.forEach(node => {
          // 根据dom选择器查找dom节点
          const el = document.getElementsByClassName(node.className);
          const elArr = Array.from(el);
          elArr.forEach(item => {
            // 渲染图表
            console.log("node.data", node.data);
            const chartData = {
              ...node.data,
              data: node.data.data.map(el => ({
                ...el,
                count: (el.count / 10000).toFixed(2)
              }))
            };
            generatePieChart(item, chartData);
          });
        });
      });
    }
  },
  beforeDestroy() {
    this.mySwiper = null;
  }
};
</script>

<style lang="less" scoped>
.swip-com-container {
  height: 100%;
  .internetSwiper,
  .noSwiperCont {
    height: 100%;
    .internetSwiper-item {
      // width: 293px;
      width: 146px;
      height: 100%;
      // width: 195px;
      font-size: 50px;
      color: aliceblue;
      text-align: center;
    }
  }
  .noSwiperCont {
    display: flex;
  }
}
</style>
